<!-- html的部分写在template里面 -->
<template>
  <div>网站建设中。。。</div>
  <div>{{ title }}</div>
  <hr />

  <div>
    <input type="text" v-model="user.username" />
    <br />
    <input type="password" v-model="user.password" />
    <br />
    <button @click="test">测试</button>
  </div>

  <div>
    {{ user }}
  </div>
  <hr>

  <table border="1">
    
    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    
    <tbody>
      
      <tr v-for="d in list">
        <td>{{ d.id }} </td>
        <td>{{ d.name }}</td>
        <td>{{ d.age }}</td>
      </tr>

    </tbody>

  </table>

</template>

<!-- js的部分写在script里面 -->
<script setup>
import { ref } from 'vue';

const title = ref('vue你好！');

const user = ref({
  username: '',
  password: '',
});

const test = () => {
  alert(JSON.stringify(user.value));
};

const list = ref([
  { id: 100, name: '张三', age: 20 },
  { id: 101, name: '李四', age: 25 },
  { id: 102, name: '王五', age: 30 },
  { id: 103, name: '赵六', age: 35 },
]);
</script>

